<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>服务项目</title>
<script type="text/javascript">
var tr = "<tr><td>{0}</td><td class='am-text-center'>{1}</td><td class='am-text-right'>{2}/{3}</td></tr>";
var temp = $("#temp").html();

//门店选择事件
$("#shop-sele").change(function () {
	var grade = $(this).find("option:selected").attr("grade");
	if(grade==$("#selectGrade").val()){
		return;
	}
	var shopId = $(this).val();
	init(shopId,grade);
});

function init(shopId,grade){
	$("#selectGrade").val(grade);
	var $recordDiv = $("#record-list");
	$recordDiv.empty();
	$.ajax({
		type : 'GET',
        url: "${ctx}/weixin/vip/service/"+shopId,
        dataType: "json",
        success: function (data) {
        	if(data.records==0){
        		Comm.msg("该门店暂无服务项目");
        	}
        	//jquery解析map数据
			$.each(data.rowsMap, function(key, value) {
				var $tab = $(Comm.format(temp, key));
				$tab.appendTo($recordDiv);
				var $tbody = $tab.find('tbody');
				//解析数组
				$.each(value, function(i, item) {
					$tbody.append(Comm.format(tr, item.serviceItemName,
							item.serviceItemNo==null?"":item.serviceItemNo, item.noVipPrice,item.vipPrice));
				});
			});
        },
        error: function (ret) {
        	Comm.msg("加载失败");
        }
    });
}

//初始化页面
init($("#shop-sele").val(),$("#shop-sele").find("option:selected").attr("grade"));
</script>
</head>
<body>
	<div class="am-g am-padding-0 am-form am-form-horizontal">
		<div class="am-form-group am-margin-0">
			<div class="am-u-sm-12 am-padding-0">
				<select id="shop-sele" data-am-selected="{btnWidth: '100%'}">
					<c:forEach items="${shopList}" var="s">
						<option value="${s.shopId}" grade="${s.shopGradeId}"
						<c:if test="${s.shopId eq vipShopId}">selected="selected"</c:if>>
						${s.name}</option>
					</c:forEach>
				</select>
				<input type="hidden" id="selectGrade"></input>
			</div>
		</div>
	</div>
	<div id="record-list">
	</div>
	<div style="display: none" id="temp">
	<h2 class="app-title am-text-center">{0}</h2>
	<table class="am-table am-text-sm app-service-table">
		<thead>
			<tr><th class="app-per-5">项目</th><th class="app-per-2 am-text-center">编号</th><th class="app-per-5 am-text-right">非会员价/会员价</th></tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	</div>
</body>
</html>
